<%@ page import="java.util.List" %>
<%@ page import="com.swxc.ssm.po.Course" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>课程详情</title>
	<link rel="stylesheet" type="text/css" href="../../../css/course.css">
	<link rel="stylesheet" type="text/css" href="../../../css/reset.css">
	<link rel="stylesheet" type="text/css" href="../../../css/course-info.css">
</head>
<body onkeydown="BindEnter(event)">
<!-- 顶部 -->
<div class="c-top">
	<!-- logo -->
	    <div class="logo">
		    <a href="<%=path%>/course/selectAll.action"><img src="../../../image/logo.jpg"></a>
	    </div>
	<!-- top导航 -->
	    <div class="topNav-box">
		    <ul>
			    <li><a href="<%=path%>/course/selectAll.action" class="f-01">课程</a><div class=""></div></li>
			    <li><a href="<%=path%>/school/selectAll.action" class="f-01">学校</a><div class=""></div></li>
			    <li><a href="" class="f-01">文章</a><div class=""></div></li>
		    </ul>
	    </div>
	<!-- 搜索框 -->
	<div class="search-box">
		<form class="search-wrap" id="search_course" name="search_course" action="<%=path%>/course/search.action">
			<input class="search-input"  type="text" id="search_input" name="search_input" placeholder="搜索教程"/>
			<input  onclick="search()"  id="enter" name="enter" type="hidden" />
		</form>
	</div>

	<% Object user = request.getSession().getAttribute("user");
		if(user==null ){
	%>
	<!-- 登陆按钮 -->
	<div class="unlogin-box">
		<a href="<%=path%>/login/toLogin.action" class="f-01">登录 &nbsp;&nbsp;</a>|
		<a href="<%=path%>/login/toRegister.action" class="f-01">&nbsp;&nbsp; 注册</a>
	</div>

	<% }else{ %>

	<!-- 用户信息 -->
	<div class="login-box">
		<img src="${user.photo}" width="50px" height="50px" alt="" class="user-img">
		<div class="user-operation">
			<a href="<%=path%>/user/toPersonal.action" class="f-01">个人中心</a>
			<a href="<%=path%>/login/outLogin.action" class="f-01">退出登录</a>
		</div>
	</div>
	<% } %>

</div>
	<!-- 主体 -->
	<div class="c-footer">MOOC</div>
	<!-- 底部 -->
	<div class="c-container">
			<!-- 课程详情 -->
			<div class="conta-left-box">
				<% String course = request.getParameter("course");   %>
				<!-- 内容主体 -->
				<div class="conta-left-middle">
					<div class="course-name" name="">${course.name}</div>
					<ul class="f-02 course-info-box">
						<li class="week course-info">
							<dl>
								<dt class="info-name">课程概述<div class="border-box"></div></dt>
								<dd class="info-value">
									<p></p><p>${course.description}</p>
								</dd>
							</dl>
						</li>
						<li class="week course-info">
							<dl>
								<dt class="info-name">预备知识<div class="border-box"></div></dt>
								<dd class="info-value">
									<p>系统学习过初中、高中英语基础课程，具有基本的英语词汇、语法基础知识以及语言能力。了解英语语音知识，能基本应对生活场景的英语会话。</p>
								</dd>
							</dl>
						</li>
						<li class="week course-info">
							<dl>
								<dt class="info-name">课程大纲<div class="border-box"></div></dt>
								<dd class="info-value">

								</dd>
							</dl>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
			<!-- 课程信息 -->
			<div class="conta-right-box">

				<!-- 课程进度 -->
				<div class="conta-right-schedule">
					<div class="right-title">课程进度<div class="border-box"></div></div>
					<dl class="right-body">
						<dd class="sc-left"><span>4</span>/13&nbsp;周</dd>
						<dd class="sc-right">
							<ul class="f-02">
								<li class="data-left">开课:&nbsp;&nbsp;<span>2017-6-25</span></li>
								<li class="data-middle"></li>
								<li class="data-right">结课:&nbsp;&nbsp;<span>2017-8-25</span></li>
							</ul>
						</dd>
					</dl>
					<div class="clear"></div>

					<% List<Course> user_course = (List) request.getSession().getAttribute("user_course"); %>
					<c:choose>

					<c:when test="${course.status ==2 }">
						<button class="course-abandon-btn">课程已结束</button>
					</c:when>

					<c:when test="${empty user}">
					<%	session.setAttribute("before_page","course-info");%>
					<form action="<%=path%>/login/toLogin.action" method="post" name="formtologin" id="formtologin">
						<input type="hidden" name="id" id="courseid" ></input>
					</form>
					<button  class="course-abandon-btn" onclick="toLogin(${course.ID})">参加课程</button>
					</c:when>

					<c:when test="${not empty user_course}">
						<c:set var="flag" value="false" />
					    <c:forEach var="item" items="${user_course}">
						    <c:if test="${item.name == course.name}">
								<c:set var="flag" value="true" />
						    </c:if>
					    </c:forEach>
						<c:if test="${flag == true}">
							<form action="<%=path%>/course/toLearn.action" method="post" name="formtolearn" id="formtolearn">
								<input type="hidden" name="learnid" id="learnid" ></input>
							</form>
							<button onclick="toLearn(${course.ID})" class="course-abandon-btn">已参加，进入学习</button>
						</c:if>

						<c:if test="${flag == false}">
							<form action="<%=path%>/course/toLearn.action" method="post" name="formtoJoin" id="formtoJion">
								<input type="hidden" name="userid" id="userid" ></input>
								<input type="hidden" name="joinid" id="joinid" ></input>
							</form>
							<button onclick="toJoin(${user.ID},${course.ID})" class="course-abandon-btn">参加课程1</button>
						</c:if>
					</c:when>

					<c:otherwise >
					<button class="course-abandon-btn">无其他情况</button>
					</c:otherwise>

					</c:choose>

				</div>
				<!-- 详细信息 -->
				<div class="conta-right-info">
					<div class="right-title">课程信息<div class="border-box"></div></div>
					<dl class="right-body">
						<dd>课程时长&nbsp;&nbsp;&nbsp;&nbsp;<span>14周</span></dd>
						<dd>课程负载&nbsp;&nbsp;&nbsp;&nbsp;<span>3-5小时每周</span></dd>
						<dd>内容类型&nbsp;&nbsp;&nbsp;&nbsp;<span>视频&nbsp;文档&nbsp;随堂检测&nbsp;富文本&nbsp;讨论</span></dd>
						<dd>课程分类&nbsp;&nbsp;&nbsp;&nbsp;<a href="" class="f-01"></a></dd>
					</dl>
				</div>
				<!-- 授课教师 -->
				<div class="conta-right-teacher">
					<div class="right-title">授课教师<div class="border-box"></div></div>
					<dl class="right-body">
						<dd class="teacher-info-box">
							<div class="teacher-img"><img src="${course.teacher.photo}"></div>
							<ul class="f-02">
								<li class="t-name">${course.teacher.name}</li>
								<li class="t-info">${course.teacher.school.name}</li>
								<li class="t-info">${course.teacher.description}</li>
							</ul>
							<div class="clear"></div>
						</dd>

					</dl>
					<div class="clear"></div>
				</div>
			</div>
			<div class="clear"></div>
		<%--</c:forEach>--%>
	</div>

<script type="text/javascript">
    function toLogin(courseid) {
        document.getElementById("courseid").value=courseid;
        document.getElementById("formtologin").submit();
    }
    function toLearn(learnid) {
		document.getElementById("learnid").value=learnid;
		document.getElementById("formtolearn").submit();
    }
    function toJoin(userid,joinid){
        document.getElementById("userid").value=userid;
        document.getElementById("joinid").value=joinid;
        document.getElementById("formtoJion").submit();
    }
    function BindEnter(obj) {
        var button = document.getElementById("enter");
        if(obj.keyCode == 13)
        {
            button.click();
            obj.returnValue = false;
        }
    }
    function search() {
        document.getElementById("search_course").submit();
    }
</script>

	<!-- 底部 -->
	<div class="c-footer">MOOC</div>
	<script src="../../../js/jquery.min.js"></script>
	<script>
        //用户操作框隐藏|显示
        $(function(){
            $('.login-box').hover(function(){
                $(this).css('background-color','#242528');
                $('.user-operation').css('display','block');
            },function(){
                $(this).css('background-color','#2E323E');
                $('.user-operation').css('display','none');
            });
        });
	</script>

</body>
</html>